<template>
  <div class="course-box">
    <div class="course_title">
      <div class="course_title_left">{{ list[leftIndex].title }}</div>
    </div>
    <!-- <div class="tabBox">
      <div v-for="(itemTab,indexTab) in list[leftIndex].courseTab" :key="indexTab" class="tabList">{{ itemTab }}</div>
    </div>-->
    <!-- 左侧轮播显示区域 -->
    <div class="imgBox">
      <div class="firstImg">
        <img :src="list[leftIndex].images[0].url" alt/>
      </div>
    </div>
    <!-- 左侧班级列表显示区域 -->
    <div class="courseListBox">
      <div v-for="(item,index) in list[leftIndex].courseList" :key="index" class="courseList">
        <div class="course_img">
          <img :src="list[leftIndex].courseList[index].url"/>
          <div class="renNum">
            <img src="../../../../assets/editapp/icon_people2x.png" alt/>
            <span>{{list[leftIndex].courseList[index].hot}}万人</span>
          </div>
        </div>
        <div class="course_con">
          <div class="course_con_title">{{ list[leftIndex].courseList[index].title }}</div>

          <div class="course_con_bottom">
            <span class="study">{{ list[leftIndex].courseList[index].study }}</span>
            <span class="money">{{ list[leftIndex].courseList[index].money }} 元</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 右侧班级编辑区域 -->
    <div v-if="list.length && list[leftIndex].showRight">
      <div class="editRightList">
        <!-- 头部提示区域 -->
        <header class="title">热门课程列表设置</header>
        <div class="editCon">
          <div v-for="(item,index) in list[leftIndex].images" :key="index" class="add_image">
            <div>
              <span style="width:95px;text-align:right;display: inline-block;">广告图片：</span>
              <div class="image">
                <!--无图片-->
                <div v-if="!list[leftIndex].images[index].url">
                  <div v-if="list[leftIndex].images[index]">+添加图片</div>
                </div>
                <!--有图片-->
                <div v-else class="show_Image">
                  <img :src="item.url" alt/>
                </div>
                <el-upload
                  :file-list="fileList"
                  :on-change="handleLogoChange"
                  :http-request="uploadLogoFile"
                  class="upload-demo"
                  action=""
                >
                  <el-button size="small" type="primary" class="uploadBtn">点击上传</el-button>
                </el-upload>
              </div>
            </div>
            <div>
              <div style="margin-top:20px;">
                <span style="width:95px;text-align:right;display: inline-block;">输入链接：</span>
                <el-input
                  v-model="item.link"
                  placeholder="例如 https://www.baidu.com"
                  style="width:200px;"
                />
              </div>
            </div>
          </div>
          <div style="margin-top:20px;">
            <span style="width:95px;text-align:right;display: inline-block;">列表标题：</span>
            <el-input v-model="list[leftIndex].title" style="width:200px;"></el-input>
          </div>
          <div style="margin-top:20px;">
            <span style="width:95px;text-align:right;display: inline-block;">发布时间：</span>
            <el-select
              v-model="list[leftIndex].recentDay"
              placeholder="请选择"
              style="width:200px;"
              @change="recentDay($event)"
            >
              <el-option
                v-for="item in dayOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div style="margin-top:20px;">
            <span style="width:95px;text-align:right;display: inline-block;">展示条数：</span>
            <el-select
              v-model="list[leftIndex].limit"
              placeholder="请选择"
              style="width:200px;"
              @change="limitNumber($event)"
            >
              <el-option
                v-for="item in selectOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div style="margin-top:20px;">
            <span style="width:95px;text-align:right;display: inline-block;">选择课程：</span>
            <el-button
              icon="el-icon-search"
              class="add_ad"
              style="width:200px;margin:5px 0;"
              @click="dialog = true"
            >选择
            </el-button>
          </div>
        </div>
      </div>
    </div>
    <el-dialog title="选择课程" :visible.sync="dialog" width="500px">
      <el-row>
        <el-input
          v-model="teacherName"
          clearable
          placeholder="请输入课程名称或关键字"
          style="width:200px;"
          @clear="filterTable = tableData"
          @keyup.enter.native="searchTeacher"
        ></el-input>
        <el-button type="primary" @click="searchTeacher">搜 索</el-button>
      </el-row>
      <el-table
        type="selection"
        ref="multipleTable"
        :data="newTable"
        tooltip-effect="dark"
        :row-key="getRowKey"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" :reserve-selection="true" width="55"></el-table-column>
        <el-table-column prop="title" label="名称"></el-table-column>
      </el-table>
      <el-pagination
        background
        layout="prev, pager, next"
        :current-page.sync="currentPage"
        :page-size="currentSize"
        :total="filterTable.length"
        style="margin-top:20px"
      ></el-pagination>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button type="primary" @click="handleConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import {getCategoryList} from '@/api/subject/category'
  import {getTenantId} from '@/utils/auth'
  import {courseList} from '@/api/user/user' // 数据接口
  import {upLoadFile} from '@/api/upLoadFile'; // 数据接口
  export default {
    props: ['list', 'leftIndex'],
    data() {
      return {
        courseCategorys: [],
        rightIndex: 0,
        fileList: [],
        EduUserVo: {},
        keyWord: '',
        courseDialogVisible: false,
        classDialogVisible: false,
        dayValue: '',
        limitValue: '',
        dialog: false,
        currentPage: 1,
        currentSize: 5,
        teacherName: '',
        filterTable: [],
        tableData: [],
        // 保存选中的数据id,row-key就是要指定一个key标识这一行的数据
        getRowKey(row) {
          return row.id
        },
        linkTableData: [
          {name: 'class NO.1', price: '2', number: '2', createTime: '2'}
        ],
        tabOptions: [],
        dayOptions: [
          {value: '3', label: '最近3天'},
          {value: '7', label: '最近7天'},
          {value: '15', label: '最近15天'},
          {value: '30', label: '最近30天'}
        ],
        cascaderOptions: [],
        selectOptions: [
          {value: '1', label: '1'},
          {value: '2', label: '2'},
          {value: '3', label: '3'},
          {value: '4', label: '4'},
          {value: '5', label: '5'}
        ]
      }
    },
    mounted() {
      this.getCourseCategorys();
      this.getCourseListData();
      console.log(this.courseCategorys)
    },
    computed: {
      newTable() {
        return this.filterTable.slice(
          (this.currentPage - 1) * this.currentSize,
          this.currentPage * this.currentSize
        )
      }
    },
    methods: {
      getCourseCategorys() {
        getCategoryList('course', getTenantId(), '0')
          .then(response => {
            console.log(response.data.items);
            this.courseCategorys = response.data.items
          })
          .catch(() => {
          })
      },
      // 动态获取列表数据
      getCourseList() {
        this.EduUserVo.tenantId = getTenantId();
        this.EduUserVo.categoryId = this.list[this.leftIndex].courseType;
        this.EduUserVo.limit = this.list[this.leftIndex].limit;
        this.EduUserVo.day = this.list[this.leftIndex].recentDay;
        courseList(this.EduUserVo)
          .then(response => {
            this.list[this.leftIndex].courseList = response.data.items;
            this.list[this.leftIndex].courseList.map(i => {
              i.url = i.largePicture;
              i.courseId = i.id;
              i.id = 0;
              i.money = i.price
            })
          })
          .catch(() => {
          })
      },
      courseType(item) {
        this.list[this.leftIndex].courseType = item[item.length - 1];
        this.getCourseList()
      },
      recentDay() {
        this.getCourseList()
      },
      limitNumber() {
        this.getCourseList()
      },
      // 图片上传
      handleLogoChange(file) {
        this.logofile = file.raw
      },
      uploadLogoFile() {
        const fileForm = new FormData();
        fileForm.append('name', this.logofile.name);
        fileForm.append('uid', this.logofile.uid);
        fileForm.append('file', this.logofile);
        upLoadFile(fileForm).then(response => {
          this.list[this.leftIndex].images[0].url = response.data.url
        })
      },
      // 图片上传
      beforeAvatarUpload(file) {
        const isImg = file.type === 'image/jpeg' || 'image/png' || 'image/gif';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isImg) {
          this.$message.error('上传头像图片只能是 JPG/PNG/GIG 格式!')
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!')
        }
        return isImg && isLt2M
      },
      handleChange(file, fileList) {
        this.fileList = fileList.slice(-1)
      },
      uploadSuccess(res, file, fileList) {
        this.list[this.leftIndex].images[0].url = URL.createObjectURL(file.raw)
      },
      searchTeacher() {
        // 如果有选择教师先清空多选数据
        this.$refs.multipleTable.clearSelection();
        this.multipleSelection = [];
        let search = this.teacherName;
        if (search) {
          this.filterTable = this.tableData.filter(function (dataNews) {
            return Object.keys(dataNews).some(function (key) {
              return ~String(dataNews[key])
                .toLowerCase()
                .indexOf(search)
            })
          })
        } else {
          this.filterTable = this.tableData
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      handleCancel() {
        this.clearDialog()
      },
      clearDialog() {
        this.dialog = false;
        this.$refs.multipleTable.clearSelection();
        this.multipleSelection = []
      },
      handleConfirm() {
        if (this.multipleSelection.length < 1) {
          this.$message.warning('请选择课程');
          return
        }
        this.list[this.leftIndex].courseList.push(...this.multipleSelection);
        this.list[this.leftIndex].courseList = Array.from(new Set(this.list[this.leftIndex].courseList));
        this.list[this.leftIndex].courseList.map(i => {
          if (!i.url) {
            i.url = i.largePicture;
          }
          i.liveStatus = i.status;
          i.teacher = i.userName;
          i.courseId = i.id;
          i.id = 0;
          if (!i.money) {
            i.money = i.price;
          }
        });
        this.clearDialog()
      },
      // 接口获取数据
      getCourseListData() {
        this.EduUserVo.tenantId = getTenantId();
        // this.EduUserVo.categoryId = 0;
        // this.EduUserVo.limit = this.list[this.leftIndex].limit;
        // this.EduUserVo.day = this.list[this.leftIndex].recentDay;
        courseList(this.EduUserVo).then(response => {
          this.tableData = response.data.items;
          this.filterTable = response.data.items;
          this.total = response.data.total;
        })
      },
    }
  }
</script>
<style lang="scss" scoped>
  .course-box {
    .imgBox {
      padding: 10px;

      .firstImg {
        width: 100%;
        // height: 120px;
        img {
          width: 100%;
          height: 100%;
          border-radius: 10px;
        }
      }

      .nextImg {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        margin-top: 10px;

        img {
          width: 48%;
          border-radius: 10px;
        }
      }
    }

    .course_title {
      display: flex;
      align-items: flex-end;
      padding: 10px;

      .course_title_left {
        font-size: 16px;
        font-weight: bold;
        position: relative;
      }

      .course_title_right {
        margin-left: 10px;
        font-size: 12px;
        color: #616161;
      }
    }

    .tabBox {
      border-top: 1px solid #eee;
      border-bottom: 1px solid #eee;
      display: flex;
      align-items: center;
      padding: 0 10px;
      overflow: auto;

      .tabList {
        width: 20%;
        height: 100%;
        box-sizing: border-box;
        text-align: center;
        padding: 10px 0;
        flex-shrink: 0;
      }

      .tabList:first-child {
        border-bottom: 2px solid rgb(77, 139, 255);
      }
    }

    .courseListBox {
      padding: 10px;
      display: flex;
      flex-wrap: wrap;
    }

    .courseList {
      width: 100%;
      margin-bottom: 10px;
      border-radius: 5px;
      overflow: hidden;
      display: flex;

      .course_img {
        width: 200px;

        img {
          width: 100%;
          display: block;
        }

        .renNum {
          color: #bcbcbc;
          font-size: 12px;
          height: 30px;
          background-color: #f4f4f4;
          display: flex;
          align-items: center;
          justify-content: center;
          border-bottom-left-radius: 10px;
          border-bottom-right-radius: 10px;

          img {
            width: 12px;
            height: 12px;
            margin-right: 10px;
            margin-top: -3px;
          }
        }
      }

      .course_con {
        padding: 10px;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .course_con_title {
          font-size: 15px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          height: 34px;
        }

        .course_con_bottom {
          color: #616161;
          display: flex;
          align-items: center;

          .money {
            color: #ff5d5d;
            font-size: 15px;
            margin-left: auto;
          }

          .study {
            font-size: 12px;
            color: #616161;
          }
        }
      }
    }
  }

  .editRightList {
    width: 400px;
    position: absolute;
    left: 105%;
    top: 0;
    padding: 10px;
    border: 1px solid #e1e1e1;
    background-color: #fafafa;

    .title {
      font-size: 14px;
      padding: 8px;
      border-bottom: 1px solid #e1e1e1;

      .help-text {
        font-size: 12px;
        color: #616161;
        margin-top: 5px;
      }
    }

    .editCon {
      background-color: #fff;
      padding: 10px 5px;
      border: 1px solid #e1e1e1;
      margin-top: 5px;
    }

    .add_image:after {
      display: block;
      clear: both;
      content: '';
      visibility: hidden;
      height: 0;
    }

    .add_image {
      position: relative;

      .image {
        position: relative;
        width: 230px;
        height: 119px;
        margin-left: 100px;
        margin-top: -20px;
        margin-bottom: 10px;
        line-height: 119px;
        text-align: center;
        background-color: #f5f5f5;

        .uploadBtn {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          opacity: 0;
        }

        /deep/ .el-upload-list {
          display: none;
        }
      }

      .show_Image {
        width: 230px;
        height: 119px;

        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
</style>
